import React, { useContext } from "react"
const ThemeContext=React.createContext({
    theme:'light'
})

const Context=React.createContext({
    img:'https://img.alicdn.com/bao/uploaded/i1/1977551943/O1CN017qsIGd1QDw7nNu9Jf_!!0-item_pic.jpg'
})
const ContextDemo=()=>{
    const user={
        name:"张三",
        level:99,
        honor:10273,
      img:'https://img.alicdn.com/bao/uploaded/i1/748485859/O1CN01qTPddS1t9T4DuL71G_!!748485859.jpg'
    }
    const theme={theme:"dark"}
   return<>
   <ThemeContext.Provider value={theme}>
   <Context.Provider value={user}>
      <Nav/>
   <Content/> 
   </Context.Provider>
   </ThemeContext.Provider>
   </>
}
const Nav=()=>{
   return<> 
   <h2>导航栏</h2>
   <UserLogin/>
    <UserAvatar/></>
}
class UserAvatar extends React.Component{
    static contextType=Context
    render(){
        console.log(this.context)
        return(
            <img src={this.context.img}  alt=""/>
        )
    }
}
class UserLogin extends React.Component {
    render() { 
        return (  
            <div>
                <ThemeContext.Consumer>
                    {theme=>(
                        <Context.Consumer>
                            {
                                user=>(  <>  {user.name}<button className={`btn btn-${theme.theme}`}>登出</button></>)
                            }
                        </Context.Consumer>
                    )}
                </ThemeContext.Consumer>
            </div>
        );
    }
}
 
const Sidebar=()=>{
      return(
          <>
          <h2>侧边栏</h2>
          <UserStats/>
          </>
      )
}
const UserStats=()=>{
    const user=useContext(Context)
    const theme=useContext(ThemeContext)
 return(
     <>
     <ul>
     {Object.keys(user).map(key=>(
         <li key={key}>{key}:{user[key]}</li>
     ))

     }     <li>{}</li>

     </ul>
     </>
 )
}
const Content=()=>{
    return(
        <>
        <h2>内容</h2>
        <Sidebar/>
        </>
    )
}

export default ContextDemo